<template>
  <!--任务审核 -->
  <div class="fillcontain">
    <bt-col-header title="任务审核"></bt-col-header>
    <!-- 查询表单 -->
    <div class="page-content">
      <el-form :model="searchParams" ref="ruleForm" label-width="120px" class="">
        <el-form-item label="任务编号" prop="taskNo" class="col-md-6">
          <el-input clearable v-model="searchParams.taskNo" placeholder="任务编号"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="auditStatus" class="col-md-6">
          <el-select clearable v-model="searchParams.auditStatus" filterable placeholder="请选择">
            <el-option v-for="item in auditStatus" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布开始时间" prop="begTime" class="col-md-6">
          <el-date-picker type="datetime" :format="'yyyy-MM-dd HH:mm:ss'" clearable v-model="searchParams.begTime" placeholder="发布开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="发布结束时间" prop="endTime" class="col-md-6">
          <el-date-picker type="datetime" :format="'yyyy-MM-dd HH:mm:ss'" clearable v-model="searchParams.endTime" placeholder="发布结束时间"></el-date-picker>
        </el-form-item>
        <div class="row">
          <div class="col-md-12 text-center mt-2">
            <rich-button type="info" plain shape="capsule" icon="search" @click="search">查询</rich-button>
            <rich-button shape="capsule" icon="quit" @click="resetSearch">重置</rich-button>
          </div>
        </div>
        <!-- </el-row> -->

      </el-form>

      <div class="">
        <!-- 操作按钮 -->
        <!-- <el-row>
          <el-col :span="24" class="pb15 pt5">
            <el-button type="danger" size="mini" style="margin-left: 10px;" plain @click="compareVersion">对比</el-button>
          </el-col>
        </el-row> -->
        <!-- 查询结果列表 -->
        <div class="table_container">
          <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" highlight-current-row header-cell-class-name="table-header-class" empty-text="无符合查询条件任务" style="width:100%">
            <!-- <el-table-column type="selection"></el-table-column> -->
            <el-table-column property="taskNo" label="任务编号" align='center' show-overflow-tooltip min-width="120"></el-table-column>
            <el-table-column property="demandNo" label="任务版本" align='center' show-overflow-tooltip min-width="80"></el-table-column>
            <el-table-column property="demandDesc" label="任务描述" align='center' show-overflow-tooltip min-width="80"></el-table-column>
            <el-table-column property="auditStatus" label="审核状态" align='center' show-overflow-tooltip min-width="80">
              <template slot-scope="scope">
                {{scope.row.auditStatus | isAuditStatus}}
              </template>
            </el-table-column>
            <el-table-column property="auditUserId" label="审核人" align='center' show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column property="auditTime" label="审核时间" :formatter="dateFormat" align='center' show-overflow-tooltip min-width="160">
              <template  slot-scope="scope">
                <div v-if="!scope.row.auditTime">--</div>
                <div v-else>{{scope.row.auditTime}}</div>
              </template>
            </el-table-column>
            <el-table-column property="publishUser" label="发布人" align='center' show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column property="creTime" label="发布时间" align='center' show-overflow-tooltip min-width="160">
              <template  slot-scope="scope">
                <div v-if="!scope.row.creTime">--</div>
                <div v-else>{{scope.row.creTime}}</div>
              </template>
            </el-table-column>
            <el-table-column property="" label="操作" align='center' show-overflow-tooltip min-width="120">
              <template slot-scope="scope">
                <!-- <div v-if="scope.row.auditStatus == '1'">
                <el-link type="primary" @click="audit(scope.row)">审核</el-link>
                </div> -->
                <el-button type="text" @click="showDetail(scope.row)">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <el-pagination 
            class="float-right mt-2"
            background 
            v-if='paginations.total > 0' 
            :page-sizes="paginations.pageSizes" 
            :page-size="paginations.pageSize" 
            :layout="paginations.layout" 
            :total="paginations.total" 
            :current-page='paginations.pageIndex' 
            @current-change='handleCurrentChange' 
            @size-change='handleSizeChange'>
          </el-pagination>
        </div>
      </div>  
    </div>
    

    <!-- 弹窗 -->
    <!-- <el-dialog :title="'任务审核'" :visible.sync="auditVisible" width="60%" center>
      <el-form :model="auditReq"
               ref="nodeForm"
               label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核状态" prop="auditStatus" >
              <el-radio v-model="auditReq.auditStatus" label="2" @change="auditChangeHandler">通过</el-radio>
              <el-radio v-model="auditReq.auditStatus" label="3" @change="auditChangeHandler">拒绝</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核意见" prop="auditMsg">
              <el-input  type="textarea" rows="2" clearable v-model="auditReq.auditMsg" placeholder="审核意见"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAudit">保 存</el-button>
      </div>
    </el-dialog> -->

  </div>
</template>

<script>
import { taskAuditPage, taskAudit } from '@/api/version/version'
import constant from '@/api/constant'
export default {
  components: {},
  data() {
    return {
      loading: false,
      tableData: [],
      searchParams: {
        taskNo: '',
        // 操作时间（起）
        begTime: '',
        endTime: '',
        publishUser: '',
        auditStatus: '1',
        pageSize: '',
        pageNumber: ''
      },

      auditStatus: constant.auditStatus,
      auditVisible: false,
      paginations: {
        total: 0,        // 总数
        pageIndex: 1,  // 当前位于哪页
        pageSize: 20,   // 1页显示多少条
        pageSizes: [5, 10, 15, 20],  //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
      },
    }
  },
  created() {
    this.getList()
  },
  activated() {
    // this.getList()
  },
  mounted() {

  },
  methods: {
    showDetail(data) {
      // console.log(data);
      this.$router.push({ path: "/drools-version/taskauditview/" + data.taskNo, query: { id: data.id } })
    },
    search() {
      this.paginations.pageIndex = 1
      this.getList()
    },
    getList() {
      this.paginations.total = 0
      this.tableData = []
      this.$store.dispatch('loading/CHANGE_LOADING', true)
      this.searchParams.pageNumber = this.paginations.pageIndex
      this.searchParams.pageSize = this.paginations.pageSize
      // let param = {
      //   taskNo:this.searchParams.taskNo,
      //   auditStatus:this.searchParams.auditStatus,
      //   begTime:this.searchParams.begTime,
      //   endTime:this.searchParams.endTime,
      // }
      taskAuditPage(this.searchParams).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        if (res.data.resultCode == constant.SUCCESS && res.data.data && res.data.data.list.length) {
          this.paginations.total = res.data.data.total
          this.tableData = res.data.data.list
        }
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
      })
    },
    saveAudit() {
      this.$store.dispatch('loading/CHANGE_LOADING', true);
      taskAudit(this.auditReq).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        if (res.data.resultCode == constant.SUCCESS) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.addVisible = false
            }
          })
          this.auditVisible = false
          this.getList()
        } else {
          this.$message({
            message: res.data.resultMsg,
            type: 'error',
            duration: 1500,
            onClose: () => {
              this.addVisible = false
            }
          })
        }

      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
      })
    },
    audit(row) {
      this.auditReq.id = row.id
      this.auditReq.auditStatus = '2'
      this.auditReq.auditMsg = '通过'
      this.auditReq.taskNo = row.taskNo
      this.auditReq.version = row.taskVersion
      this.auditVisible = true
    },
    // compareVersion () {
    //   constant.clearTag(this)
    //   this.$router.push({name: constant.routerName.flowCompare})
    // },
    // 清除查询条件
    resetSearch() {
      this.searchParams.taskNo = ''
      this.searchParams.auditStatus = ''
      this.searchParams.begTime = ''
      this.searchParams.endTime = ''
    },
    // 每页多少条切换
    handleSizeChange(pageSize) {
      this.paginations.pageSize = pageSize;
      this.getList();
    },
    // 上下分页
    handleCurrentChange(page) {
      this.paginations.pageIndex = page;
      this.getList();
    },
    dateFormat(row, column) {
      return constant.dateFormat('YYYY-mm-dd HH:MM:SS', row.lastUpdateTime)
    },

  },
  filters: {
    isAuditStatus: function (value) {
      return constant.getLabel(value, constant.auditStatus)
    }
  },
  watch: {},
  computed: {}

}
</script>

<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;

  .fastQuery {
    padding: 15px 20px 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;

    .fastQuery_title {
      color: #666;
      padding: 6px 0px;
    }

    .fastQuery_item {
      margin: 0 10px;
    }

    .item_default {
      .el-button {
        color: #409eff !important;
        border-color: #c6e2ff !important;
        background-color: #ecf5ff !important;
      }
    }

    .moreCondition {
      color: #68a3fc;
      cursor: pointer;
      padding: 6px 0px;

      .el-icon-d-arrow-right {
        transform: rotate(90deg);
      }

      .el-icon-d-arrow-left {
        transform: rotate(-90deg);
      }
    }
  }
}

.contain {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.pagination {
  padding: 10px 20px;
  text-align: right;
}

.operationIcon {
  // padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
  box-shadow: 0 0 3px #f9f9f9;

  .svg-icon {
    font-size: 14px;
    fill: #68a3fc;
  }
}

.search_container {
  padding: 20px 20px 0 20px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>



